<!--
 * @Author: FanWeiHua
 * @Date: 2021-07-16 14:01:31
 * @LastEditTime: 2021-07-21 10:09:57
 * @Description: Custom checkbox
-->
<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Custom checkbox</title>
    <link rel="stylesheet" href="./index.css" />
  </head>
  <style>
    body {
      background-color: #09091b;
    }
  </style>
  <body>
    <svg class="checkbox-symbol">
      <symbol id="check" viewbox="0 0 12 10">
        <polyline
          points="1.5 6 4.5 9 10.5 1"
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="2"
        ></polyline>
      </symbol>
    </svg>
    <div class="checkbox-container">
      <input class="checkbox-input" id="apples" type="checkbox" />
      <label class="checkbox" for="apples">
        <span>
          <svg width="12px" height="10px">
            <use xlink:href="#check"></use>
          </svg>
        </span>
        <span>Apples</span>
      </label>
      <input class="checkbox-input" id="oranges" type="checkbox" />
      <label class="checkbox" for="oranges">
        <span>
          <svg width="12px" height="10px">
            <use xlink:href="#check"></use>
          </svg>
        </span>
        <span>Oranges</span>
      </label>
    </div>
  </body>
</html>
